<template>
  <div class="custom-table">
    <div v-if="tableBtns && tableBtns.length>0" class="toolbar">
      <slot name="toolbar"></slot>
      <a-form layout="inline">
        <a-form-item v-for="item in tableBtns" :key="item.code">
          <a-button
            :icon="item.icon"
            size="small"
            :disabled="item.code == 'batch-delete' && selectedRows.length==0"
            :type="!item.type?'default':item.type"
            @click="item.handler(item.code)"
          >{{item.text}}</a-button>
        </a-form-item>
      </a-form>
    </div>
    <a-table
      ref="baseTable"
      :scroll="{ x: 1500, y: 700 }"
      :rowKey="record => record.id"
      :size="size"
      :pagination="false"
      :columns="columns"
      :dataSource="data"
      :rowSelection="rowSelectionData"
      :bordered="bordered"
      :loading="loading"
      @showSizeChange="onShowSizeChange"
      :defaultExpandedRowKeys="defaultExpandedRowKeys"
    >
      <span slot="action" slot-scope="text,record">
        <template v-for="(btn,index) in optionBtns">
          <a-tooltip :key="btn.code" style="width:auto !important;">
            <template slot="title">{{btn.popover}}</template>
            <a-button
              :type="btn.type ? btn.type : 'default'"
              size="small"
              :icon="btn.icon"
              :disabled="!btn.editable ? false : btn.editable(record)"
              @click="btn.handler(btn.code,record)"
            ></a-button>
          </a-tooltip>
          <a-divider v-if="index < optionBtns.length-1" :key="index" type="vertical"/>
        </template>
      </span>
    </a-table>
    <div
      v-if="showPagination"
      style="text-align:right;padding:15px 0 8px 0;border-bottom: 1px solid rgba(232, 232, 232, 1);"
    >
      <a-pagination
        showSizeChanger
        :pageSize.sync="pageSize"
        @showSizeChange="onShowSizeChange"
        :total="total"
        v-model="current"
        size="small"
        :defaultCurrent="defaultCurrent"
        :pageSizeOptions="pageSizeOptions"
        :showTotal="total => `共 ${total} 数据`"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    optionBtns: {
      type: Array,
      default() {
        return [];
      }
    },
    defaultExpandedRowKeys: {
      type: Array,
      default() {
        return [];
      }
    },
    tableBtns: {
      type: Array,
      default() {
        return [];
      }
    },
    url: {
      type: String,
      default: ""
    },
    size: {
      type: String,
      default: "middle"
    },
    selectionType: {
      type: String,
      default: "checkbox"
    },
    bordered: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    searchParam: {
      type: Object,
      default() {
        return {};
      }
    },
    showPagination: {
      type: Boolean,
      default: true
    },
    autoLoad: {
      type: Boolean,
      default: true
    },
    selection: {
      type: Object,
      default() {
        return {
          type: "checkbox",
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(
              `selectedRowKeys: ${selectedRowKeys}`,
              "selectedRows: ",
              selectedRows
            );
            this.selectedRowKeys = selectedRowKeys;
            this.selectedRows = selectedRows;
            this.$emit("selectChange", selectedRowKeys, selectedRows);
          },
          onSelect: (record, selected, selectedRows) => {
            console.log(record, selected, selectedRows);
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            console.log(selected, selectedRows, changeRows);
          },
          getCheckboxProps: record => ({
            props: {
              disabled: record.editabled == 0 // Column configuration not to be checked
            }
          })
        };
      }
    }
  },
  data() {
    let me = this;
    return {
      data: [],
      loading: false,
      current: 1,
      total: 0,
      defaultCurrent: 1,
      pageSize: 15,
      pageSizeOptions: ["15", "20", "30", "40"],
      selectedRowKeys: [],
      selectedRows: [],
      rowSelectionData: me.selection
    };
  },
  created() {
    if (this.autoLoad) {
      this.load();
    }
  },
  methods: {
    setCurrent(page) {
      this.current = page;
    },
    initLoad() {
      this.current = 1;
      this.load();
    },
    load() {
      let me = this;
      if (!me.url) {
        console.error("表格未配置查询接口地址");
        return;
      }
      const pager = {
        pageNo: me.current,
        pageSize: me.pageSize
      };
      let param = {};
      Object.assign(param, pager, me.searchParam);
      me.loading = true;
      me.$http.ajax({
        url: me.url,
        data: param,
        success: res => {
          if (res.records) {
            me.data = res.records;
            me.total = res.total;
          } else {
            me.data = res;
            me.total = res.length;
            me.$nextTick(() => {
              me.$emit("loaded", me.data);
            });
          }
          me.loading = false;
        },
        fail() {
          me.loading = false;
        },
        error() {
          me.loading = false;
        }
      });
    },
    onShowSizeChange(current, size) {
      console.log(current, size);
      this.load();
    },
    getData() {
      return this.data;
    }
  }
};
</script>

<style scoped>
.toolbar {
  /* background: rgba(250, 250, 250, 1); */
  padding: 5px 0 5px 10px;
}
.custom-table {
  border-top: 1px solid rgba(232, 232, 232, 1);
  border-left: 1px solid rgba(232, 232, 232, 1);
  border-right: 1px solid rgba(232, 232, 232, 1);
}
</style>
